<template>
  <div class="order">
    <div class="content">
      <van-nav-bar
        title="订单"
        left-text="返回"
        left-arrow
      />
      <div class="nearBuy">
        <p>最近购买</p>
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <van-image
              height="90px"
              fit="cover"
              src="https://pic2.zhimg.com/v2-ee7b3a6afbd250696dbdd5de7eec3ceb_r.jpg?source=1940ef5c"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              height="90px"
              fit="cover"
              src="https://img.zcool.cn/community/01e77b5d906281a8012060be7a6f70.jpg@1280w_1l_2o_100sh.jpg"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              height="90px"
              src="https://n.sinaimg.cn/sinakd202167s/732/w1399h933/20210607/0e59-kracxer2059681.jpg"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              height="90px"
              src="https://n.sinaimg.cn/sinakd202167s/732/w1399h933/20210607/0e59-kracxer2059681.jpg"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="order-table">
        <van-tabs v-model:active="active" animated shrink line-width="10">
          <van-tab title="全部订单">
            <div class="all-order" v-for="item in orderList" :key="item.title">
              <van-card
                :num="item.num"
                :price="item.price"
                :title="item.title"
                :thumb="item.pic"
              />
            </div>
          </van-tab>
          <van-tab title="待评价">内容 2</van-tab>
          <van-tab title="退款">内容 3</van-tab>
        </van-tabs>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import Footer from "../../components/footer.vue";
export default {
  name: "Order",
  components: {
    Footer,
  },
  setup(){
      const store=useStore()
      const orderList = computed(() => {
      return store.state.countAbout.orderList;
    })
    return{
      orderList
    }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-tab--active {
  font-weight: 700;
}
/deep/ .van-image__img {
  border-radius: 10px;
}
/deep/ .van-tabs__line {
  background-color: #ffc400;
}
.order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
    padding: 0px 10px;
    p {
      margin: 10px 0px;
      font-size: 15px;
    }
    .nearBuy {
      p {
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        padding-left: 10px;
        margin: 10px 0px 0px 0;
      }
      border-radius: 10px;
      overflow: hidden;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
    .order-table {
      margin-top: 10px;
      .all-order {
        margin-top: 10px;
      }
    }
  }
}
</style>